<template>
    <nav class="head-bar">
      <ul class="nav-line">
        <li class="nav-item">商城</li>
        <li class="nav-item">合作</li>
        <li class="nav-item">文档</li>
        <li class="nav-item">登录</li>
        <li class="nav-item" @click="toBack">控制台</li>
      </ul>
    </nav>
</template>

<script>
export default {
  name: 'HeadBar',
  data () {
    return {}
  },
  methods: {
    toBack () {
      this.$router.push('/back')
    }
  }
}
</script>

<style lang="less" scoped>
.head-bar {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  display: block;
  z-index: 9999;
  min-width: 1024px;
  margin: 0;
  .nav-line {
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0 auto;
    flex-flow: row nowrap;
    align-content: center;
    justify-content: center;
    .nav-item {
      flex: 0 1 auto;
      flex-basis: 100px;
      cursor: pointer;
    }
  }
}
</style>
